<template>
    <div class="flex">
        <!-- 这两个试了一下没有用处 -->
        <!-- <div>
            screenSize：<el-input-number size="small" controls-position="right" v-model="params.screenSize.width" /> x
            <el-input-number size="small" controls-position="right" v-model="params.screenSize.height" />
        </div> -->
        <!-- <div>
            viewPosition<el-input-number size="small" controls-position="right" v-model="params.viewPosition.x" /> x
            <el-input-number size="small" controls-position="right" v-model="params.viewPosition.y" />
        </div> -->
        <div>
            deviceScaleFactor<el-input-number
                size="small"
                controls-position="right"
                v-model="params.deviceScaleFactor"
            />
        </div>
        <div>
            viewSize<el-input-number size="small" controls-position="right" v-model="params.viewSize.width" /> x
            <el-input-number size="small" controls-position="right" v-model="params.viewSize.height" />
        </div>
        <div>scale<el-input-number size="small" controls-position="right" v-model="params.scale" /></div>
    </div>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'

const emit = defineEmits(['change'])

const params = reactive<Electron.Parameters>({
    screenPosition: 'mobile',
    screenSize: { width: 0, height: 0 },
    viewPosition: { x: 0, y: 0 },
    deviceScaleFactor: 2,
    viewSize: { width: 0, height: 0 },
    scale: 1
})

watch(params, (newParams) => { 
    emit('change', newParams)
})
</script>

<style scoped></style>
